﻿var circle = window.circle || {};
circle = (function ()
{
    var dq = dashingquill;
    var dname = dq.domainName;
    var sz = Sizzle;

    dq.bind('.members', 'click', function (circle)
    {
        var classes = dq.find('.members-list-visible');
        dq.each(classes, function (c) {
            var usersList = dq.find('#users-list', c.parentNode);
            if (usersList) {
                c.className = 'members';
                dq.hide(usersList);
            }
        });

        var usersList = dq.find('#users-list', circle.parentNode);
        dq.xhr({
            url: dname + '/GetMembersFromCircle/' + circle.parentNode.parentNode.id,
            callback: function (response)
            {
                if (response.IsSuccess == true)
                {
                    if (response.Members == "No members yet!")
                    {
                        alert(response.Members);
                        return;
                    }
                    var splittedNames = response.Members.split(',');
                    var splittedTokens = response.Tokens.split(',');
                    var members = '';

                    dq.each(splittedNames, function (name, i) {
                        members += '<div id="' + splittedTokens[i] + '">' + '<img class="remove-user-name" src="' + dname + '/content/images/close-dim.png" />' + name + '</div>';
                    });

                    usersList.innerHTML = members;
                    dq.show(usersList);
                    circle.className = 'members-list-visible';

                    dq.bind('.remove-user-name', 'mouseover', function (closeButton)
                    {
                        closeButton.src = dname + '/content/images/close-black.png';
                    });
                    dq.bind('.remove-user-name', 'mouseout', function (closeButton)
                    {
                        closeButton.src = dname + '/content/images/close-dim.png';
                    });
                    dq.bind(sz('.remove-user-name', usersList), 'click', function (closeButton)
                    {
                        /* If there is no user in the circle!! i.e. on removing the last user */
                        var length = dq.find('.remove-user-name', closeButton.parentNode.parentNode).length;
                        if (length == 1) circle.className = 'members';

                        var tempParentNode = closeButton.parentNode;
                        var tempTopParentNode = closeButton.parentNode.parentNode;
                        closeButton.parentNode.parentNode.removeChild(closeButton.parentNode);

                        dq.xhr({
                            url: dname + '/RemoveUserFromCircle?circleToken=' + circle.parentNode.parentNode.id + '&userToken=' + closeButton.parentNode.id,
                            callback: function (response) {
                                if (response.IsSuccess == false) {
                                    alert(response.Error);
                                    tempTopParentNode.appendChild(tempParentNode);

                                    if (length == 1) circle.className += ' members-list-visible';
                                }
                                else {
                                    var spanMembersCount = sz('.Members-Count', tempTopParentNode.parentNode)[0];
                                    if (spanMembersCount && spanMembersCount.innerHTML > 0) {
                                        var membersCount = spanMembersCount.innerHTML;
                                        membersCount = (+membersCount) - 1;

                                        var span = sz('.Members-Names', tempTopParentNode.parentNode)[0];
                                        if (span) {
                                            var html = span.innerHTML;
                                            var userName = response.UserFullName;

                                            if (html.indexOf(userName + ', ') != -1) {
                                                html = html.replace(userName + ', ', '');
                                            }
                                            else if (html.indexOf(', ' + userName) != -1) {
                                                html = html.replace(', ' + userName, '');
                                            }
                                            else if (html.indexOf(userName) != -1) {
                                                html = html.replace(userName, '');
                                            }

                                            if (membersCount == 0) {
                                                span.innerHTML = '(No members yet!)';
                                                spanMembersCount.innerHTML = 0;
                                            }
                                            else {
                                                span.innerHTML = html;
                                                spanMembersCount.innerHTML = membersCount;
                                            }
                                        }
                                    }
                                }
                            }
                        });                        
                    });
                }
                else alert(response.Error);
            }
        });

        /* Bubbling is a bad concept in my opinion - That's why I've to manually show these things – because on document click event: I'm hiding all context menus (opened context menus) [for scalability!!] --- stopBubbling ( dashingquill.js [last function] ) not works for me --- I don't know why?? */
        dq.bind(usersList, 'click', function () {            
            circle.className = 'members-list-visible';
            dq.show(usersList);
        });
    });

    dq.bind('.circle-name', 'click', function (circle)
    {
        var id = circle.parentNode.parentNode.id;
        var _circleName = circle.innerHTML;
        circle.innerHTML = '<input id="edit-circle-' + id + '" type="text" style="border:0;box-shadow:none; padding:0;" />';
        circle.className = 'circle-name-edit-state';
        var editCircleTextBox = dq.find('#edit-circle-' + id);
        if (editCircleTextBox)
        {
            editCircleTextBox.value = _circleName;
            editCircleTextBox.focus();

            dq.bind(editCircleTextBox, 'blur', function (textBox)
            {
                var value = textBox.value;
                if (value.length <= 0) value = _circleName;
                if (value.length > 15)
                {
                    circle.innerHTML = value.substr(0, 15) + '...';
                    circle.setAttribute('title', value);
                }
                else
                {
                    circle.innerHTML = value;
                    circle.removeAttribute('title');
                }
                circle.className = 'circle-name';

                if (value.length > 0 && value != _circleName)
                {
                    dq.xhr({
                        url: dname + '/UpdateCircleName/'+ id +'/' + value,
                        callback: function (response)
                        {
                            if (response.IsSuccess == false)
                            {
                                alert(response.Error);
                                circle.innerHTML = _circleName;
                            }
                        }
                    });
                    }
            });
        }
    });

    dq.bind('.delete', 'click', function (deleteButton) {
        var parent = deleteButton.parentNode.parentNode;
        dq.xhr({
            url: dname + '/DeleteCircle?circleToken=' + parent.id,
            callback: function (response) {
                if (response.IsSuccess == true) {
                    parent.style.opacity = '0';
                    dq.once(8, function () {
                        parent.parentNode.removeChild(parent);
                    });
                }
                else {
                    alert(response.Error);
                }
            }
        });
    });

    dq.bind(document, 'click', function () {
        var classes = dq.find('.members-list-visible');
        dq.each(classes, function (c) {
            var usersList = dq.find('#users-list', c.parentNode);
            if (!usersList || usersList.innerHTML == '') {
                c.className = 'members';                
            } else {
                c.className = 'members';
                dq.hide(usersList);
            }
        });
    });

    var you = dq.find('#you');
    if (you) {
        dq.bind(you, 'click', function () {
            location = dname + '/' + you.getAttribute('accesskey');
        });
    }
})(circle);